<template>
  <div class="tree-tools">
    <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
      <el-col>
        <span>{{ treeNode.name }}</span>
      </el-col>
      <el-col :span="4">
        <el-row type="flex" justify="end">
          <!-- 两个内容 -->
          <el-col>{{ treeNode.manager }}</el-col>
          <el-col>
            <!-- 下拉菜单 element -->
            <el-dropdown @command="handleCommand">
              <span>
                操作<i class="el-icon-arrow-down" />
              </span>
              <!-- 下拉菜单 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item v-if="!treeNode.root" command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item v-if="!treeNode.root" command="del">删除部门</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入接口
import { delDepartment } from '@/api/department'
export default {
  name: 'TreeTools',
  filters: {},
  components: {},

  props: {
    treeNode: {
      type: Object,
      require: true,
      default: null
    }
  },

  data() {
    return {
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    handleCommand(command) {
      if (command === 'del') {
        this.$confirm('此操作将永久删除该组织, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await delDepartment(this.treeNode.id)
          // console.log('shanchu')
          this.$emit('on-delete')
          this.$message.success('删除成功!')
        })
      } else if (command === 'add') {
        this.$emit('on-add', this.treeNode)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.tree-tools{
  width: 100%;
}
</style>
